<template>
    <view class="index">
		<view class="hb-top-bg">
			<image src="../../static/images/bg.png" mode="widthFix"></image>
		</view>
        <view v-for="(item, index) in state.pages" :key="index">
            <!-- <template v-if="item.name == 'search'">
                <w-search :content="item.content" :styles="item.styles" />
            </template> -->
            <template v-if="item.name == 'h-banner'">
				轮播图
            </template>
            <template v-if="item.name == 'nav'">
                <w-nav :content="item.content" :styles="item.styles" />
            </template>
            <template v-if="item.name == 'home-bg'">
				<image style="width: 100%;" :src="getImageUrl(item.content.bg_img)" mode="widthFix"></image>
            </template>
        </view>
        <!-- <view class="article" v-if="state.article.length">
            <view
                class="flex items-center article-title mx-[20rpx] my-[30rpx] text-2xl font-medium"
            >
                最新资讯
            </view>
            <news-card
                v-for="item in state.article"
                :key="item.id"
                :news-id="item.id"
                :item="item"
            />
        </view> -->
		<gcm-red-bag :money="state.money" :fRbagmodelshow="state.rbagmodelshow" :options="redBagConfig" @onOpen="onOpen" @onClose="onClose"></gcm-red-bag>
	
        <tabbar />
    </view>
</template>

<script setup lang="ts">
import { useAppStore } from '@/stores/app'
import { onLoad } from '@dcloudio/uni-app'
import { getHome } from '@/api/shop'
import { checkRedpack,receiveRedpack } from '@/api/redpack'
import { reactive } from 'vue'
import cache from '@/utils/cache'
import { useUserStore } from '@/stores/user'

const { getImageUrl } = useAppStore()

const userStore = useUserStore()

interface Person {
  [key: string]: any;
}
const redBagConfig:Person = {}

const state = reactive<{
    pages: any[],
	article: any[],
	money: string,
	rpkey: string,
	rbagmodelshow: boolean,
}>({
    pages: [],
    article: [],
	money: "00.00",
	rpkey: "",
	rbagmodelshow: false,
})

const checkRPKey = async () => {
	// if(state.rpkey == ''){
	// 	state.rpkey = cache.get('rpkey')
	// }else{
	// 	cache.set('rpkey', state.rpkey, 3 * 60)
	// }
	const data = await checkRedpack({ rpkey:state.rpkey })
	setTimeout(()=>{
		if (data.has_code === true){
			state.rbagmodelshow = true
		}
	},500)
}

const getData = async () => {
    await getHome().then((data)=>{
		state.pages = JSON.parse(data?.page?.data)
		state.article = data.article
		let redPack = JSON.parse(data?.redpackPage?.data)
		if (redPack){
			let content = redPack[0].content
			redBagConfig.qrCode = content.qr_code ? getImageUrl(content.qr_code) : '';
			redBagConfig.openrbBg = content.open_rp_bg ? getImageUrl(content.open_rp_bg) : getImageUrl('static/open_bag_bgImg.png');
			redBagConfig.rbBg = content.rp_bg ? getImageUrl(content.rp_bg) : getImageUrl('static/rb_bg.png');
			redBagConfig.btnBg = content.rp_btn_bg ? getImageUrl(content.rp_btn_bg) : getImageUrl('static/btn_bg.png');
			console.log(redBagConfig)
		}
	})
}

const onOpen = async (res: any) => {
	await receiveRedpack({ rpkey:state.rpkey }).then((e)=>{
		state.money = e.data.amount
		cache.remove('rpkey')
		res(true);
	}).catch((e)=>{
        uni.$u.toast(e)
		res(false);
	})
}
const onClose = async () => {
	state.rbagmodelshow = false
	if (userStore.isLogin === true){
		cache.remove('rpkey')
	}
}

function GetRequest(url: any) {
	const result = {}
	const query = url.split('?')[1]
		if (query) {
			const queryArr = query.split('&')
			queryArr.forEach((item: any) => {
			const value = item.split('=')[1]  
			const key = item.split('=')[0]
			const results=result as any
			results [key] = value
		})
	}
    return result  
}
getData()
onLoad(async (options: any) => {
	const q = decodeURIComponent(options.q)
	if (q != 'undefined') {
		let request:any = GetRequest(q);
		if (request.rp){
			state.rpkey = request.rp
			checkRPKey()
		}
	}else if (options.rp){
		state.rpkey = options.rp
		checkRPKey()
	}else if (cache.get('rpkey') && userStore.isLogin === true){
		checkRPKey()
	}
})
</script>

<style lang="scss">
	.hb-top-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: -1;
		image{
			width: 100%;
		}
	}
	.article-title {
		&::before {
			content: '';
			width: 8rpx;
			height: 34rpx;
			display: block;
			margin-right: 10rpx;
			background: $u-type-primary;
		}
	}
</style>
